<template>
    <div>
        <!-- 表头分页查询条件， shadow="never" 指定 card 卡片组件没有阴影 -->
        <el-card shadow="never" class="mb-5">
            <!-- flex 布局，内容垂直居中 -->
            <div class="flex items-center">
                <el-text>标签名称</el-text>
                <div class="ml-3 w-52 mr-5"><el-input v-model="searchTagName" placeholder="请输入（模糊查询）" /></div>

                <el-text>创建日期</el-text>
                <div class="ml-3 w-30 mr-5">
                    <!-- 日期选择组件（区间选择） -->
                    <el-date-picker v-model="pickDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" :shortcuts="shortcuts" size="default" @change="datepickerChange"/>
                </div>

                <el-button type="primary" class="ml-3" :icon="Search" @click="getTableData">查询</el-button>
                <el-button class="ml-3" :icon="RefreshRight" @click="reset">重置</el-button>
            </div>
        </el-card>

        <el-card shadow="never">
            <!-- 新增按钮 -->
            <div class="mb-5">
                <el-button type="primary" @click="addCategoryBtnClick">
                    <el-icon class="mr-1">
                        <Plus />
                    </el-icon>
                    新增</el-button>
            </div>

            <!-- 分页列表 -->
            <el-table :data="tableData" border stripe style="width: 100%" v-loading="tableLoading">
                <el-table-column prop="name" label="标签名称" width="180">
                    <template #default="scope">
                        <el-tag type="success" class="ml-2">{{ scope.row.name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="articlesTotal" label="文章数" width="100" />
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column label="操作" >
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="deleteCategorySubmit(scope.row)">
                            <el-icon class="mr-1">
                                <Delete />
                            </el-icon>
                            删除
                        </el-button>
                	</template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->   
            <div class="mt-10 flex justify-center">
                <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 50]"
                :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="getTableData"/>
            </div>
        </el-card>
        <!-- 添加分类 -->
        <!-- <el-dialog v-model="dialogVisible" title="添加文章分类" width="40%" :draggable ="true" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="formRef" :rules="rules" :model="form">
                    <el-form-item label="分类名称" prop="name" label-width="80px">
                        <el-input size="large" v-model="form.name" placeholder="请输入分类名称" maxlength="20" show-word-limit clearable/>
                    </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>  -->
        <FormDialog ref="formDialogRef" title="添加文章标签分类" destroyOnClose @submit="onSubmit">
                <el-form ref="formRef" :model="form">
                    <el-form-item  prop="name" >
                        <div class="flex gap-2">
                            <el-tag
                            v-for="tag in dynamicTags"
                            :key="tag"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)"
                            >
                            {{ tag }}
                            </el-tag>
                            <span class="w-20">
                                <el-input
                                v-if="inputVisible"
                                ref="InputRef"
                                v-model="inputValue"
                                class="w-20"
                                size="small"
                                @keyup.enter="handleInputConfirm"
                                @blur="handleInputConfirm"
                                />
                                <el-button v-else class="button-new-tag" size="small" @click="showInput">
                                + 新增标签
                                </el-button>
                            </span>
                        </div>
                    </el-form-item>
                </el-form>
        </FormDialog>
    </div>
    
</template>

<script setup>
// 引入所需图标
import { Search, RefreshRight } from '@element-plus/icons-vue'
import moment from 'moment';
import { ref, reactive, onMounted,nextTick } from 'vue';
import { getTagPageList, addTag, deleteTag } from '@/api/admin/tag';
import { showMessage, showModel } from '@/composables/util';
import FormDialog from '@/components/FormDialog.vue';
const startDate = reactive({value: ''})
const endDate = reactive({value: ''})

const datepickerChange = (e) => {
    startDate.value = moment(e[0]).format('YYYY-MM-DD')
    endDate.value = moment(e[1]).format('YYYY-MM-DD')
    console.log(e)
    console.log('开始时间：' + startDate.value + ', 结束时间：' + endDate.value)
}
// 日期
const pickDate = ref('')
const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]
// 当前页码，给了一个默认值 1
const current = ref(1)
// 总数据量，给了个默认值 0
const total = ref(0)
// 每页显示的数据量，给了个默认值 10
const size = ref(10)
// 表格数据
const tableData = ref([])
// 分页查询的分类名称
const searchTagName = ref('')
// 表格加载 Loading
const tableLoading = ref(false)
const getTableData = async() => {

    tableLoading.value = true
    try{
        const res = await getTagPageList({
            current: current.value,
            size: size.value,
            name: searchTagName.value,
            startDate: startDate.value,
            endDate: endDate.value
        })
        // console.log(res);
        tableData.value = res.data
        current.value = res.current
        size.value = res.size
        total.value = res.total      
    } finally {
        tableLoading.value = false
    }
    
}
const reset = () => {
    searchTagName.value = ''
    pickDate.value = ''
    startDate.value = null
    endDate.value = null
}
// getTableData()
onMounted(() => getTableData())
const handleSizeChange = (chooseSize) => {
    size.value = chooseSize
    getTableData()
}
// 对话框是否显示
// const dialogVisible = ref(false)
const formDialogRef = ref(null)
// 新增标签按钮点击事件
const addCategoryBtnClick = () => {
    formDialogRef.value.open()
}
// 表单引用
const formRef = ref(null)
// 添加标签分类表单对象
const form = reactive({
    tags: []
})
const deleteCategorySubmit = async (row) => {

    try {
        await showModel('是否删除该标签？')
        const res = await deleteTag(row.id)
        if(res.success == true) {
            showMessage('删除成功')
            getTableData()
        } else {
            let msg = res.message
            showMessage(msg, 'error')
        }
    } catch {
        console.log('取消了');
    }
    
}
const onSubmit = async() => {
    formDialogRef.value.showBtnLoading()
    form.tags = dynamicTags.value
    try{
        const res = await addTag(form)
        if(res.success == true) {
            showMessage('添加成功')
            // 置空
            form.name = ''
            dynamicTags.value=[]
            // 隐藏对话框
            formDialogRef.value.close()
            // 重新加载数据
            getTableData()
        }
    } catch {
            let message = res.message
            //提示信息
            showMessage(message, 'error')
    } finally{
        formDialogRef.value.closeBtnLoading()
    }
    // // 验证表单
    // formRef.value.validate(async (valid) => {
    //     // 请求添加接口
    //     const res = await addTag(form)
    //     if(res.success == true) {
    //         showMessage('添加成功')
    //         // 置空
    //         form.name = ''
    //         // 隐藏对话框
    //         formDialogRef.value.close()
    //         // 重新加载数据
    //         getTableData()
    //     } else {
    //         let message = res.message
    //         //提示信息
    //         showMessage(message, 'error')
    //     }
    //     formDialogRef.value.closeBtnLoading()
    // })
}
// 标签输入框值
const inputValue = ref('')
// 已经输入的标签数组
const dynamicTags = ref([])
// 控制标签输入框知否显示
const inputVisible = ref(false)
// 标签输入框的引用
const InputRef = ref('')

const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value.input.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>
